
<template>
    <div class="big_div">
        <div class="top-bar">
            <div class="admin-info">
                尊敬的{{ adminName }}管理员您好
            </div>
            <p class="title_font">智能交互问答平台</p>
            <el-button ><router-link :to="'/adminView/' ">返回</router-link></el-button>
        </div>
        <div class="content">
            <div class="sidebar">
                <ul>
                    <h2>教师信息</h2>
                    <li @click="selectNavItem(1)" :class="{ active: selectedNavItem === 1 }">教师详细信息</li>
                    <li @click="selectNavItem(2)" :class="{ active: selectedNavItem === 2 }">创建的课程</li>
                    <li @click="selectNavItem(3)" :class="{ active: selectedNavItem === 3 }">加入的课程</li>
                </ul>
            </div>
            <div class="main">
                <div v-if="selectedNavItem === 1">
                    <!-- <h1>学生详细信息</h1> -->
                    <el-descriptions class="description-el" title="教师详细信息" :column="1" style="width: 60%;" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    姓名
                                </div>
                            </template>
                            {{ teacherDetail.name }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    教工号
                                </div>
                            </template>
                            {{ teacherID }}
                        </el-descriptions-item>
                        <!-- <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                学院
                            </div>
                        </template>
                        {{ Suzhou }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                                登录密码
                            </div>
                        </template> -->
                        <!-- <el-tag size="small">School</el-tag> -->
                        <!-- </el-descriptions-item> -->
                    </el-descriptions>
                </div>
                <div v-if="selectedNavItem === 2">
                    <p>{{ teacherDetail.name }}老师创建的课程:</p>

                    <el-main class="card-container">
                        <el-card class="custom-card" v-for="(item, index) in createList" :key="index"
                            :style="{ maxWidth: '400px', minWidth: '400px', height: '250px' }">
                            <template #header>
                                <div class="card-header">
                                    <span>{{ item.className }} &nbsp;&nbsp;课程ID :{{ item.classID }}</span>
                                </div>
                            </template>
                            <div>课程：{{ item.courseID }}</div>
                            <div>课程名称：{{ item.courseName }}</div>
                            <div>授课教师：{{ item.name }}</div>
                            <div>授课教师ID：{{ item.teacherID }}</div>
                            <!-- <div>开课时间：{{ item.startTime }}</div>
                        <el-button type="primary" style="width:auto" @click="removeClass(item)">删除课程</el-button> -->
                        </el-card>
                    </el-main>
                </div>
                <div v-if="selectedNavItem === 3">
                    <p>{{ teacherDetail.name }}老师加入的课程:</p>

                    <el-main class="card-container">
                        <el-card class="custom-card" v-for="(item, index) in attendList" :key="index"
                            :style="{ maxWidth: '400px', minWidth: '400px', height: '250px' }">
                            <template #header>
                                <div class="card-header">
                                    <span>{{ item.className }} &nbsp;&nbsp;课程ID :{{ item.classID }}</span>
                                </div>
                            </template>
                            <div>课程：{{ item.courseID }}</div>
                            <div>课程名称：{{ item.courseName }}</div>
                            <div>授课教师：{{ item.name }}</div>
                            <div>授课教师ID：{{ item.teacherID }}</div>
                            <el-button type="primary" style="width:auto" @click="removeClass(item)">将老师移出课程</el-button>
                        </el-card>
                    </el-main>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElNotification, ElButton } from 'element-plus';
import { allClassInfoService } from '../../../api/allClassInfo'
import { removeTeacherFromCourse } from '@/api/adminApi/allAdmin'
import { useStore } from '../store';
import { useRoute } from 'vue-router';
const router = useRoute();
const teacherID = ref(null);
onMounted(() => {
    teacherID.value = router.params.id;
    // 在这里可以根据 teacherID 进行一些操作，比如发送请求获取详细信息
});
// 获取路由参数中的 teacherID
const store = useStore()
const createList = ref(store.createClass);
const attendList = ref(store.attendClass)
const teacherDetail = ref(store.detailTeacher)
watch(
    () => store.createClass,
    () =>
        createList.value = store.createClass, {
    deep: true
}
)
watch(
    () => store.attendClass,
    () => {
        attendList.value = store.attendClass
    }, {
    deep: true
}
)
const selectedNavItem = ref(1);
const selectNavItem = (navItemIndex) => {
    selectedNavItem.value = navItemIndex;
};
const removeClass = async (item) => {
    const data = {
        classID: item.classID,
        teacherID: teacherID.value
    }
    await removeTeacherFromCourse(data)
        .then((res) => {
            if (res !== 200) {
                alert(res.msg)
            } else {
                const index = createList.value.findIndex(p => p.className === item.className);
                if (index !== -1) {
                    createList.value.splice(index, 1);
                    ElNotification({
                        title: '成功',
                        message: '删除成功',
                        type: 'success'
                    });
                }
            }
        })

};
</script>
<style scoped>
.big_div {
    display: flex;
    /* 使用 Flexbox 布局 */
    background-color: #f7f9fc;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title_font {
    color: #f5f5f5;
    font-size: 40px;
    display: inline-block;
    margin-left: 40%;
    /* text-align: center; */
    position: absolute;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    width: 100%;
    background-color: #0997F7;
    color: #f5f5f5;
    font-size: large;
    height: 80px
}

.sidebar {
    position: flex;
    background-color: #fff;
    width: 12%;
    /* height: 10000px; */
    height: 100vh;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    overflow-y: auto;
}

.content {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 20px;
}

.main {
    flex: 1;
    height: 100vh;
    /* 调整为占满整个视口的高度 */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    margin-left: 20px;
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}

.sidebar ul li {
    font-size: 16px;
    line-height: 2.5;
    padding-left: 20px;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}

.sidebar ul li:hover {
    background-color: #f7f9fc;
}

.cell-item {
    width: 40%;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素在需要时换行 */
    justify-content: flex-start;
    /* 子元素从容器起始位置开始排列 */
    gap: 40px;

    /* 调整间隔大小 */
    .custom-card {
        border-radius: 15px;
        /* 圆润的边角 */
        overflow: hidden;
        /* 防止内容溢出边框 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 添加阴影效果 */
        width: 400px;
        height: 200px;
        /* 调整卡片宽度 */
    }
}
</style>
